@color-yellow: #998744;
@color-orange : #ff9434;
@color-orange-light : #fff6da;
@color-black : #323232;
@color-font-light : #999999;
@color-bg-pink : #fffbeb;
@color-bg-black : #464646;

.box-game-pic {
    >img {
        width: 100%;
    }
}

.box-link {
    .download {
        >img {
            width: 100%;
            margin-bottom: -4px;
        }
    }
    .link-02 {
        >.el-col {
            background-color: #323232;
            padding: 14px 0px;
            color: #FFF;
            border-right: @color-yellow 1px solid;

            &:last-child {
                border-right: none;
            }
        }  
    }
    .link-03 {
        margin-left: -6px;
        margin-right: -6px;
        .item {
            background-color: #494a61;
            color: #c4c7ff;
            border-radius: 10px;
            padding: 2px 0px;
            margin: 6px;
            transition: 0.3s;
            .iconfont {
                font-size: 24px;
            }
            &:hover {
                background-color: #696a81;
                cursor: pointer;
            }
        }
    }

    .link-data {
        text-align: left;
        background-color: @color-orange;
        color: #FFF;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        transition: 0.2s;
        .iconfont {
            font-size: 30px;
            float: left;
            margin-left: 80px;
        }

        &:hover {
            cursor: pointer;
            background-color: @color-orange + #222;
        }
    }
}

.box-newses {
    .el-tabs {
        background-color: #FFFFFF;
        
        .el-tabs__nav {
            padding-left: 20px;
            .el-tabs__active-bar {
                margin-left: 20px;
                background-color: @color-orange;
            }
        }
        .el-tabs__item {
            &.is-active,&:hover {
                color: @color-orange;
            }
        }

        .yi-ul {
            margin-bottom: 14px;
            .tag {
                color: @color-orange;
            }
            .date {
                float: right;
            }
            li {
                cursor: pointer;
                &:hover {
                    color: #999;
                }
            }
        }
    }
}

.box-job-info {
    text-align: left;
    background-color: #FFF;

    .box-select {
        padding: 20px 0px 0px 10px;
        >.title {
            font-size: 16px;
            color: @color-orange;
            border-left: @color-orange 3px solid;
            padding-left: 5px;
            margin-bottom: 30px;
        }
        >.job-module {
            margin-bottom: 40px;
            .module-title {
                margin-bottom: 10px;
                position: relative;
                padding-left: 20px;
                color: #646464;
                &::after {
                    content : ' ';
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    background: url('/static/image/index/icon-title.png') no-repeat;
                    background-size: 100% 100%;
                    position: absolute;
                    top: 3px;
                    left: 0px;
                }
            }
            .module {
                margin-bottom: 10px;
                >div {
                    display: inline-block;
                    width: 50px;
                    text-align: center;
                    margin-right: 14px;
                    &.cate {
                        color: @color-orange;
                        border: @color-orange 1px solid;
                    }
                    &.job {
                        color: #646464;
                        border: #646464 1px solid;
                        border-radius: 3px;
                        &.active {
                            background-color: @color-orange;
                            border-color: @color-orange;
                            color : #FFF;
                        }
                    }
                }
            }
        }
    }

    .box-image {
        >img {
            width: 120%;
            margin-top: 40px;
        }
    }
}

.box-show {
    background-color: #32363c;
    .el-tabs {
        .el-tabs__nav-wrap {
            // background-color: #996538;
            &::after {
                background-color: #996538;
            }
        }
        .el-tabs__nav {
            padding-left: 20px;
            .el-tabs__active-bar {
                margin-left: 20px;
                background-color: @color-orange;
            }
        }
        .el-tabs__item {
            color: #FFF;
            &.is-active,&:hover {
                color: @color-orange;
            }
        }
    }

    .box-yuantu {
        padding:20px;
        img {
            width: 100%;
        }
    }
}

.box-service {
    background: url('/static/image/index/bg-service.png') no-repeat;
    background-size: 100% 100%;
    height: 80px;
    color: #FFF;
    padding-top: 60px;
    text-align: left;
    >.text {
        font-size: 18px;
        >.iconfont {
            float: left;
            font-size: 28px;
            margin: -3px 0px 0px 110px;
        }
    }
}

.box-image {
    >img {
        width: 120%;
    }
}
.box-attr {
    >.box-img{
        margin-top: 30px;
        text-align: center;
        margin-bottom: 40px;
        >img {width: 100px;}
    }
    >.box-tip {
        >.tip {
            color: #646464;
            padding: 4px 0px;
            >span {
                border-radius: 4px;
                border: @color-orange 1px solid;
                padding: 0px 4px;
                margin-right: 4px;
            }
        }
    }
}

.box-data {
    background: url('/static/image/index/bg-data.png') no-repeat center bottom;
    background-size: 100% auto;
    background-color: #FFF;
    padding-bottom: 160px;
    .box-title {
        text-align: left;
        padding: 14px 20px;
        font-size: 16px;
        border-bottom: #dcdcdc 1px solid;
        >.title {
            border-left: @color-orange 3px solid;
            padding-left: 5px;
            color: @color-orange;
        }
    }

    .content {
        padding: 20px 20px;
        .cate {
            display: inline-block;
            width: 60px;
            height: 20px;
            color: #FFF;
            background: url('/static/image/index/bg-cate.png') no-repeat;
            background-size: 100% 100%;
        }
        >.box-cate {
            margin-bottom: 40px;
        }
        .box-item {
            text-align: left;
            >a {
                display: inline-block;
                color: #646464;
                // margin-top: 4px;
                margin-bottom: 6px;
                margin-right: 6px;
                &:hover {
                    cursor: pointer;
                    color: #323232;
                }
            }
        }
    }
}

.box-notice {
    background-color: #FFF;
    >.wrap-title {
        padding: 40px 0px 30px 0px;
        >.title {
            display: inline-block;
            padding: 8px 20px;
            font-size: 18px;
            background-color: @color-orange;
            color: #FFF;
            border-radius: 14px;
        }
    }
    >.content {
        margin-bottom: 40px;
        >p {
            margin: 6px 0px;
        }
    }
    >.tip {
        margin: 20px;
        border: @color-orange 1px solid;
        padding: 5px;
    }
    >.logo {
        padding: 20px;
        >img {
            width: 100%;
        }
    }
}

.box-download {
    background-color: #FFF;
    padding: 40px 20px;
    text-align: left;
    ul {
        >li {
            list-style: none;
            margin-bottom: 20px;
        }
        padding-left: 0px;
        .download {
            background-color: @color-orange;
            color: #FFF;
            padding: 24px 0px;
            font-size: 16px;
            >.icon {
                float: left;
                margin-left: 40px;
                width: 30px;
                height: 30px;
                margin-top: -4px;
            }
        }
        .info, .info-02 {
            >div {
                margin: 4px 0px;
            }
        }
        .info {
            padding-left: 10px;
        }
        .info-02 {

        }
    }
}

.box-data-02 {
    background-color: #FFF;
    padding: 20px;
    .data {
        margin-bottom: 60px;
        >.title {
            font-size: 16px;
            color: #4C1F00;
            margin-bottom: 20px;
        }
        >.content {
            text-align: center;
            >.item {
                display: inline-block;
                width: 100px;
                margin : 10px;
                cursor: pointer;
                &:hover {
                    color: #888;
                }
            }
        }
    }
}

.box-data-info{
    background-color: #FFF;
    text-align: left;
    padding: 20px 20px;
    min-height: 650px;
    >.title {
        color: #3F1300;
        margin-bottom: 20px;
        >.name {
            
            font-size: 16px;
            border-left: #3F1300 3px solid;
            padding-left: 5px;
            margin-bottom: 5px;
        }
        >.date {
            font-size: 12px;
        }
    }
    >.article {
        p {
            text-indent: 20px;
            clear: both;
        }
        >.title {
            color: #3F1300;
            font-size: 16px;
        }
        >.small-title{
            font-size: 14px;
            color: #3F1300;
            border-bottom: 2px solid #e4e4e4;
            padding: 10px 0;
            margin-bottom: 5px;
        }
        >.tips{
            background: #faf8ee;
            padding: 10px 20px;
        }
        &.basic-article>.title{
            margin: 20px 0;
            &:last-child{
                margin-top: 0;
            }
        }
        
        >.panel {
            border-collapse: collapse;
            margin-bottom: 20px;
            td {
                border: none;
                margin: none;
                padding: none;
            }
            .two-td{
                background:#EAF4FF;
                padding: 10px;
                .title{
                    font-size: 16px;
                    color: #3F1300;
                }
                .left{
                    width: 45%;
                    overflow: hidden;
                    text-align: center;
                    img{
                        width: 85%;
                    }
                }
                .right{
                    width: 53%;
                     padding: 33px 0 0 10px;
                }
                .left,.right{
                   float: left;
                }
            }
            .clear p{
                margin:0;
            }
            .text {
                width: 70%;
                background-color: #EAF4FF;
                padding: 10px;
                .title {
                    font-size: 16px;
                    color: #3F1300;
                }
            }
            .img {
                padding: 0px 10px;
                width: 30%;
                vertical-align: middle;
                background-color: #D0E4FF;
                >img {
                    width: 100%;
                }
            }
        }
        >.panel-jijia {
            margin-bottom: 20px;
            .attr {
                width: 60%;
                table {
                    border-collapse: collapse;
                }
                th, td {
                    border-right: #FFF 1px solid;
                    padding: 10px 2px;
                    text-align: center;
                }
                th {
                    background-color: #494961;
                    color: #FFF;
                }
                td {
                    background-color: #8A89B1;
                    color: #FFF;
                }
            }
            .img {
                width: 40%;
                >img {
                    width: 100%;
                }
            }
        }
        >.box-img {
            text-align: center;
            margin: 10px 0px;
            >img {max-width: 90%;}
        }
        >.notice {
            background-color: #E0EDFE;
            padding: 10px;
            margin-top: 30px;
            >div,p {
                margin: 6px 0px;
            }
        }
        .basic-table{
           border-collapse:collapse; 
           width: 100%;
           th,.th{
               background: #f9eeda;
           }
           .title{
             text-indent: 20px;
           }
           tr>.title{
             background: #f9eeda;
             text-align: center;
           }
            tr,td,th{
                padding: 8px 10px;
                border:1px solid #948b54;
                
            }
            .skill-td1{
              text-align:center;border-right: none;
            }
            .skill-two{
              width: 200px;
            }
            .skill-img{
              width:20px;background:#fff;border-left:none
            }
            .img{
                  text-align: center;
                }
             &.ban-table{
                th,td{
                    width: 50%;
                }
            }
        }
        .long-table{
          width: 121%;
          margin: 10px auto 10px -21%;
          font-size: 12px;
          th,td{
            padding: 5px 0;
            text-align: center;
          }
        }
        .all-panel{
            .title{
                font-size: 16px;
                margin: 0;
                padding: 5px;
                color: #7d2c1c;
            }
            .des{
                background: #faf8ee;
                padding: 5px;
            }
            .smail-des{
              background: #faf8ee;
              padding: 5px 20px;
              li{
                padding: 5px 0;
              }
            }
        }
        .center{
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
    }
}

.box-news-02 {
    background-color: #FFF;
    .el-tabs {
        .el-tabs__header {
            background-color: #F0F0F0;
        }
        .el-tabs__nav {
            .el-tabs__item {
                &.is-active,&:hover {
                    color: @color-orange;
                }
            }
        }    
    }

    ul.list-news {
        text-align: left;
        padding-left: 0px;
        min-height: 590px;
        li {
            >a {
                color: #323232;
                text-decoration: none;
                &:hover {
                    color: #646464;
                }
            }
            list-style: none;
            border-bottom: @color-orange 1px dashed;
            padding: 6px 3px;
            .date {
                float: right;
            }
        }
    }
}